import Vue from 'vue'
import Vuex from 'vuex'
import router from '../router'

Vue.use(Vuex)

export default new Vuex.Store({
  // 存储状态（变量）
  state: {
    tags: [{
      path: '/index',
      name: 'Index',
      fullPath: '/index',
      meta: { title: '系统首页',key: 'Index' ,keepAlive:true }
    }],
    // 选中状态，菜单和tag 共享
    checked: 'Index',
    crumb: []
  },
  // 对数据获取之前的再次编译，可以理解为state的计算属性。在组件中通过 this.$sotre.getters.xxx使用
  getters: {
    getTags(state){
      return state.tags;
    },
    getChecked(state){
      return state.checked;
    },
    getCrumb(state){
      return state.crumb;
    },
    // 上传图片需要的Header数据
    getHeader(state){
      return {
        'Authorization': Vue.ls.get("userInfo", '').token,
        'User-Id': Vue.ls.get("userInfo", '').id
      }
    },
    getAuthorization(state){
      return Vue.ls.get("userInfo", '').token;
    },
  },
  // 修改状态，并且是同步的。在组件中通过this.$store.commit(‘xxx’,params)使用。这个和我们组件中的自定义事件类似。
  mutations: {
    setTags(state,data){
      // 添加打开的tag
      state.checked = data.meta.key;
      const index = state.tags.find(item => item.meta.key === data.meta.key);
      if (!index){
        state.tags.push(data);
      }
    },
    removeTags(state,data){
      // 删除指定的tag
      const index = state.tags.findIndex(item => item.meta.key === data.meta.key);
      state.tags.splice(index, 1);
      // 当最后一项是选中，就往前进一为选中
      if (data.meta.key === state.checked){
        const tag = state.tags[state.tags.length - 1];
        state.checked = tag.meta.key;
        // 跳转到指定的页面
        router.push({path: tag.fullPath})
      }
    },
    // 更新面包屑
    setCrumb(state,data){
      state.crumb = data;
    }
  },
  // 提交 mutation，异步操作。在组件中通过this.$store.dispath(‘xxx’)使用
  actions: {
  },
  // store的子模块，为了开发大型项目，方便状态管理而使用的，即将store分割为模块，使store对象不会太臃肿。这里我们就不解释了，用起来和上面的一样。
  modules: {}
})
